
import router from '@/router/permission'
import { RouteType } from '@/types/router'
import { defineStore } from 'pinia'
import { ToPotional } from '@/types/index'
import { getLocalStorage, setLocalStorage } from '@Tea/utils'
import { adminConfig } from "@Tea/model"

export type ActiveType = {
  name: string,
  title: string,
}

type mainMenu = {
  pName: string,
  pTitle: string
} 

interface StoreState{
  activeList: (ActiveType & mainMenu)[]
  appRoute: RouteType,
  keepAliveList: string[],
  defaultAvtive: ActiveType
}

export default defineStore('routerStore', {
  state: (): StoreState => {
    return {
      activeList: [],
      appRoute: {} as RouteType,
      defaultAvtive: {} as ActiveType,
      keepAliveList: []
    }
  },
  getters: {
    activeParent: (state) => state.activeList[0],
    activeChildList: (state) => state.activeList.slice(1),
  },
  actions: {
    /**
     * @vuse 改变路由
     * @param data 包含当前路由，还有它的顶级父级路由
     */
    changeTargetRoute(data: (ActiveType & ToPotional<mainMenu>)): void {

      const { name, title, pName = name, pTitle = title } = data
      // 第一个面包屑为左边的菜单栏，只有当路由不是左边菜单时才添加至面包屑
      if (!this.activeList.some((el) => el.name === name) && pName !== name) {
        this.activeList.push({
          name,
          title,
          pName,
          pTitle
        })
        
        // 添加缓存
        this.keepAliveList.push(name)

        // 保存路由
        this.saveRoute()
      }
      
      this.defaultAvtive.name = name
      this.defaultAvtive.title = title
      
      this.activeList[0].name = pName
      this.activeList[0].title = pTitle
    },
    /**
     * @vuse 将路由保存在本地
     */
    saveRoute(): void {
      setLocalStorage(`${adminConfig.systemCode}-targetRoute`, this.activeList)
    },
    /**
     * @vuse 刷新、登录时重建路由
     */
    initRoute() {
      const activeList = getLocalStorage(`${adminConfig.systemCode}-targetRoute`) as (ActiveType & mainMenu)[]

      if (activeList == undefined || activeList?.length == 0) {
        const atticRoute = this.getAtticRoute()
        this.activeList = [{
          name: atticRoute[0].code,
          title: atticRoute[0].title,
          pName: "",
          pTitle: "",
        }]
      } else {
        this.activeList = activeList
        
        // 将要缓存的路由重新添加
        for (let i = 1; i < activeList.length; i++) {
          this.keepAliveList.push(activeList[i].name)
        }
      }
    },
    /**
     * @vuse 点击删除 菜单路由
     * @param e 点击事件对象 ，阻止事件的冒泡，防止删除的同时，还进行路由跳转
     * @param index 点击的索引
     */
    deleteActive(e: MouseEvent, index: number) {
      this.activeList.splice(index + 1, 1)
      const length = this.activeList.length
      if (length === 1) {
        router.push({ name: this.activeParent.name })
      }
      else {
        const targetIndex = this.activeList[index + 1] ? this.activeList[index + 1] : this.activeList[index]
        router.push({ name: targetIndex.name })
      }
      
      // 保存路由
      this.saveRoute()

      // 删除缓存目标
      this.keepAliveList.splice(index, 1)
        
      // 阻止点击事件的向下传递，防止点击删除时切换路由
      e.stopPropagation()
    },
    // 删除所有子标签
    clearAll() {
      this.keepAliveList = []
      // 删除第一个以外的所有路由
      this.activeList.splice(1)
      this.saveRoute()
      router.push({ name: this.activeList[0].name })
    },
    getAtticRoute() {
      return this.appRoute.children
    }
  }
})